<script>
import BookApi from '../../api/book';
import BookReviewForm from '../../components/review/BookReviewForm.vue';
import BookReviewList from '../../components/review/BookReviewList.vue';

export default {
    components: {
        BookReviewForm,
        BookReviewList
    },
    data() {
        return {
            book: {},
            reviewListKey: 0
        }
    },
    methods: {
        async getBook(bookId) {
            try {
                const api = new BookApi();
                let res = await api.find(bookId);
                this.book = res.data;
                //保存在sessionStorage存储book信息，可以在2个组件中传递数据。
                sessionStorage.setItem(`book-${this.book.id}`, JSON.stringify(this.book));
                console.log(this.book);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async delBook(bookId) {
            try {
                const api = new BookApi();
                let res = await api.delete(bookId);
                if (res.code === 204) {
                    this.$myMessageBox(res.msg);
                    this.$router.replace({ name: "book-list" });
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        refreshBookReviewList() {
            this.reviewListKey += 1;
        }
    },
    mounted() {
        let bookId = this.$route.params.id;
        this.getBook(bookId);
    },
    computed: {
        bookInfo() {
            let data = {};
            for (const key in this.book) {
                if (Object.hasOwnProperty.call(this.book, key)) {
                    if (!this.book[key]) {
                        data[key] = "\u3000";
                    } else {
                        data[key] = this.book[key];
                    }
                    if (key === "intro") {
                        data[key] = this.book[key].replace(/\n/g, "</p><p>");
                        data[key] = `<p>${data[key]}</p>`;
                    }
                }
            }
            return data;
        }
    }
}
</script>

<template>
    <div class="book-detail w80">
        <div class="header">
            <h2>{{ bookInfo.title }}</h2>
            <p>
                <router-link class="button" :to="'/book/edit/' + bookInfo.id">编辑</router-link>
                <a class="button" href="javascript:void(0);" @click="delBook(bookInfo.id)">删除</a>
                <a class="button" href="javascript:void(0);" @click="goBack">返回</a>
            </p>
        </div>
        <div class="block">
            <img :src="bookInfo.pic" :alt="bookInfo.title" />
            <div class="info">
                <dl>
                    <dt>作者：</dt>
                    <dd>{{ bookInfo.author }}</dd>
                </dl>
                <dl>
                    <dt>出版社：</dt>
                    <dd>{{ bookInfo.publisher }}</dd>
                </dl>
                <dl>
                    <dt>出品方：</dt>
                    <dd>{{ bookInfo.producer }}</dd>
                </dl>
                <dl>
                    <dt>副标题：</dt>
                    <dd>{{ bookInfo.subtitle }}</dd>
                </dl>
                <dl>
                    <dt>原作名：</dt>
                    <dd>{{ bookInfo.originalTitle }}</dd>
                </dl>
                <dl>
                    <dt>译者：</dt>
                    <dd>{{ bookInfo.translator }}</dd>
                </dl>
                <dl>
                    <dt>出版年：</dt>
                    <dd>{{ bookInfo.pubdate }}</dd>
                </dl>
                <dl>
                    <dt>页数：</dt>
                    <dd>{{ bookInfo.pages }}</dd>
                </dl>
                <dl>
                    <dt>定价：</dt>
                    <dd>{{ bookInfo.price }}</dd>
                </dl>
                <dl>
                    <dt>装帧：</dt>
                    <dd>{{ bookInfo.binding }}</dd>
                </dl>
                <dl>
                    <dt>丛书：</dt>
                    <dd>{{ bookInfo.series }}</dd>
                </dl>
                <dl>
                    <dt>ISBN：</dt>
                    <dd>{{ bookInfo.isbn }}</dd>
                </dl>
            </div>
        </div>
        <div class="intro"><span v-html="bookInfo.intro"></span></div>
        <div class="review">
            <book-review-form :book-id="book.id" @refresh="refreshBookReviewList" />
            <book-review-list :book-id="book.id" :key="reviewListKey" />
        </div>
    </div>
</template>

<style scoped>
div.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: #06c dashed 1px;
}

.block {
    display: flex;
    margin-top: 16px;
}

.block img {
    height: 200px;
    width: 140px;
    margin-right: 16px;
}

.block .info {
    flex: auto;
}

.block dl {
    margin: 4px auto;
    display: flex;
    justify-content: flex-start;
}

.block dd {
    margin-left: 10px;
}

.intro {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: blue dashed 1px;
}

.review {
    margin: 8px auto;
    width: 90%;
}
</style>